<template>
    <div>
        <head-top></head-top>
		<section class="data_section">
			<header class="section_title">数据统计</header>
			<el-row :gutter="20" style="margin-bottom: 10px;">
                <el-col :span="4"><div class="data_list today_head"><span class="data_num head">今日数据：</span></div></el-col>
				<el-col :span="4"><div class="data_list">新增用户<span class="data_num">{{todayUsercCount}}</span> </div></el-col>
				<el-col :span="4"><div class="data_list">新增订单<span class="data_num">{{todayOrderCount}}</span> </div></el-col>
                <el-col :span="4"><div class="data_list">新增商家<span class="data_num">{{todayUsersCount}}</span> </div></el-col>
			</el-row>
            <el-row :gutter="20" style="margin-bottom: 10px;">
                <el-col :span="4"><div class="data_list all_head"><span class="data_num head">总数据：</span></div></el-col>
                <el-col :span="4"><div class="data_list">注册用户<span class="data_num">{{usercCount}}</span> </div></el-col>
                <el-col :span="4"><div class="data_list">订单<span class="data_num">{{orderCount}}</span> </div></el-col>
                <el-col :span="4"><div class="data_list">商家<span class="data_num">{{usersCount}}</span> </div></el-col>
            </el-row>
			<el-row :gutter="20">
                <el-col :span="4"><div class="data_list all_head"><span class="data_num head">查询数据：</span></div></el-col>
				<el-col :span="8">
					<div>
						<el-date-picker v-model="value6" type="daterange" placeholder="选择日期范围" :picker-options="pickerOptions">
    					</el-date-picker>
					</div>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="seachEveryData">查询</el-button>
				</el-col>
            </el-row>
		</section>
		<tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency>
    </div>
</template>
<script>
	import headTop from '../components/headTop'
	import tendency from '../components/tendency'
	import dtime from 'time-formater'
	import {total,today,daily} from '@/api/getData'
    export default {
    	data(){
    		return {
				pickerOptions:{},
				value6:"",
				startDay:'',
				endDay:'',
    			todayUsercCount: 0,
    			todayOrderCount: 0,
                todayUsersCount: 0,
                usercCount: 0,
                orderCount: 0,
                usersCount: 0,
				sevenDay: [],
				sevevDayObj:[],
    			sevenDate: [[],[],[]],
    		}
    	},
    	components: {
    		headTop,
    		tendency,
    	},
    	mounted(){
    		this.initData();
    		
    	},
        computed: {
        },
    	methods: {
    		async initData(){
				this.getTotal();
				this.getTodayTotal();
				const today = dtime().format('YYYY-MM-DD');				
				var data2 =[];
				var data3 =[];
				var index =7;
				var highNumber = 1;
				var lowNumber =-1;
				for(let i = index; i > 0; i--){
					var data1 =[];
					const everyday={};
					for (let i = highNumber; i > lowNumber; i--) {					
						const date = dtime(new Date().getTime() - 86400000*i).format('YYYY-MM-DD');
						data1.push(date);			
					}
					everyday.start=data1[0];
					everyday.end=data1[1];
					highNumber++;
					lowNumber++;
					data3.push(everyday.start);
					data2.push(everyday);				
				}
				this.sevenDay= data3.reverse();
				this.sevevDayObj= data2.reverse();
				this.getSevenData();
			},
			async seachEveryData(){
				function formatTen(num) { 
					return num > 9 ? (num + "") : ("0" + num); 
				} 
				function formatDate(date) { 
					var year = date.getFullYear(); 
					var month = date.getMonth() + 1; 
					var day = date.getDate(); 
					return year + "-" + formatTen(month) + "-" + formatTen(day); 
				} 
				if(this.value6){
					var that = this;
					var startDay = this.value6[0];
					var endDay = this.value6[1];
					this.startDay=formatDate(startDay);
					this.endDay=formatDate(endDay);
					const res = daily({startDay:this.startDay,endDay:this.endDay,uid:sessionStorage.getItem("uid"),token:sessionStorage.getItem("token")});
					res.then(function(value){
						const everydayData = value.data;
						const everyday =[];
						const apiArr= [[],[],[]];
						everydayData.forEach((item,index) => {
							everyday.push(item.day);
							apiArr[0].push(item.usercCount);
							apiArr[1].push(item.orderCount);
							apiArr[2].push(item.usersCount);
						});
						that.sevenDay=everyday.reverse();
						apiArr[0].reverse();
						apiArr[1].reverse();
						apiArr[2].reverse();
						that.sevenDate=apiArr;
						console.log(that.sevenDay);
						console.log(that.sevenDate);
					},function(){})
				}
			},
			async getTotal(){
				var data = {};
				data.token = sessionStorage.getItem("token"); 
				data.uid = sessionStorage.getItem("uid"); 
				const res = await total(data);
				if(res.status==200){
					if(res.data){
						this.usercCount=res.data.usercCount;
                		this.orderCount=res.data.orderCount;
                		this.usersCount=res.data.usersCount;
					}
				}else{
					this.$message({
						type: 'error',
		                message: res.message
					})
				}
			},
			async getTodayTotal(){
				var data = {};
				data.token = sessionStorage.getItem("token"); 
				data.uid = sessionStorage.getItem("uid"); 
				const res = await today(data);
				if(res.status==200){
					if(res.data){
						this.todayUsercCount=res.data.usercCount;
                		this.todayOrderCount=res.data.orderCount;
                		this.todayUsersCount=res.data.usersCount;
					}
				}else{
					this.$message({
						type: 'error',
		                message: res.message
					})
				}
			},
			async getSevenData(){
				var that = this;
				const res = daily({startDay:this.startDay,endDay:this.endDay,uid:sessionStorage.getItem("uid"),token:sessionStorage.getItem("token")});
				res.then(function(value){
					const everydayData = value.data;
					const everyday =[];
					const apiArr= [[],[],[]];
					everydayData.forEach((item,index) => {
						everyday.push(item.day);
						apiArr[0].push(item.usercCount);
						apiArr[1].push(item.orderCount);
						apiArr[2].push(item.usersCount);
					});
					that.sevenDay=everyday.reverse();
					apiArr[0].reverse();
					apiArr[1].reverse();
					apiArr[2].reverse();
					that.sevenDate=apiArr;
			})
		},
		watch:{
            '$route' (to, from) {
                if(to.path=="/manage"){
					console.log(to);
                    this.initData();
                }  
            }
        }   
    }
}
</script>

<style lang="less">
	@import '../style/mixin';
	.data_section{
		padding: 20px;
		margin-bottom: 40px;
		.section_title{
			text-align: center;
			font-size: 30px;
			margin-bottom: 10px;
		}
		.data_list{
			text-align: center;
			font-size: 14px;
			color: #666;
            border-radius: 6px;
            background: #E5E9F2;
            .data_num{
                color: #333;
                font-size: 26px;

            }
            .head{
                border-radius: 6px;
                font-size: 22px;
                padding: 4px 0;
                color: #fff;
                display: inline-block;
            }
        }
        .today_head{
            background: #FF9800;
        }
        .all_head{
            background: #20A0FF;
        }
	}
    .wan{
        .sc(16px, #333)
    }
</style>
